<template>
  <view class="wechat-auth-container">
    <!-- 微信图标区域 -->
    <view class="wechat-icon-box">
      <image 
        class="wechat-big-icon" 
        src="/static/Dl/微信登录.png" 
        mode="aspectFit"
      ></image>
    </view>

    <!-- 授权提示文本 -->
    <view class="auth-desc">
      <text class="auth-title">微信快捷登录</text>
      <text class="auth-subtitle">请授权获取你的微信公开信息以完成登录</text>
    </view>

    <!-- 核心操作按钮 -->
    <view class="auth-btns">
      <button 
        class="auth-btn" 
        @tap="handleWechatAuth"
        :disabled="isLoading"
      >
        <template v-if="isLoading">登录中...</template>
        <template v-else>确认登录</template>
      </button>
      <button class="cancel-btn" @tap="handleCancel">取消</button>
    </view>

    <!-- 隐私提示 -->
    <view class="privacy-tip">
      <text>登录即表示同意</text>
      <text class="link" @tap="toProtocol('user')">《用户协议》</text>
      <text>和</text>
      <text class="link" @tap="toProtocol('privacy')">《隐私政策》</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 加载状态控制
const isLoading = ref(false)

// 跳转到协议页面
const toProtocol = (type: 'user' | 'privacy' | 'all') => {
  uni.navigateTo({
    url: `/pages/Dl/agreement?type=${type}`
  })
}

// 取消登录，返回上一页
const handleCancel = () => {
  uni.navigateBack()
}

// 简化版登录逻辑：直接跳转首页（无接口请求）
const handleWechatAuth = async () => {
  if (isLoading.value) return
  isLoading.value = true

  try {
    // 模拟加载延迟（提升用户体验）
    await new Promise((resolve) => setTimeout(resolve, 800))

    // 直接提示登录成功并跳转到首页
    uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 })
    
    setTimeout(() => {
      uni.switchTab({ url: '/pages/tabbar/Index/index' })
    }, 1000)

  } catch (error) {
    console.error('登录异常:', error)
    uni.showToast({ 
      title: '登录失败，请重试', 
      icon: 'none',
      duration: 1500
    })
  } finally {
    isLoading.value = false
  }
}
</script>

<style lang="css" scoped>
.wechat-auth-container {
  padding: 0 30rpx;
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* 微信图标样式 */
.wechat-icon-box {
  margin-bottom: 50rpx;
}
.wechat-big-icon {
  width: 180rpx;
  height: 180rpx;
}

/* 授权文本样式 */
.auth-desc {
  text-align: center;
  margin-bottom: 80rpx;
}
.auth-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 20rpx;
}
.auth-subtitle {
  font-size: 26rpx;
  color: #999999;
}

/* 按钮样式 */
.auth-btns {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 100rpx;
}
.auth-btn {
  width: 100%;
  height: 100rpx;
  background-color: #07C160;
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
}
.auth-btn:disabled {
  opacity: 0.8;
}
.cancel-btn {
  width: 100%;
  height: 100rpx;
  background-color: #f8f8f8;
  border-radius: 50rpx;
  color: #333333;
  font-size: 32rpx;
  border: none;
}

/* 隐私提示样式 */
.privacy-tip {
  font-size: 22rpx;
  color: #999999;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8rpx;
}
.privacy-tip .link {
  color: #07C160;
  text-decoration: underline;
}
</style>